import React, { useState, useEffect } from 'react';
import {
  Layout,
  Menu,
  Card,
  Avatar,
  Breadcrumb,
  Statistic,
  Table,
  Button
} from 'antd';
import {
  UserOutlined,
  LogoutOutlined,
  DashboardOutlined,
  TrophyOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  TeamOutlined,
  AppstoreOutlined,
  SettingOutlined,
  CalendarOutlined,
  UnorderedListOutlined,
  UserAddOutlined,
  StarOutlined
} from '@ant-design/icons';
import { useNavigate, Routes, Route, useLocation } from 'react-router-dom';
import '../css/studentPage.css';
import JoinActivityPage from './companents/activity/joinActivityPage';
import RegisteredActivityPage from './companents/activity/registeredActivityPage';
import HistoryPointPage  from  './companents/activity/historyPointPage';

const { Header, Sider, Content } = Layout;

const StudentPage: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [currentUser, setCurrentUser] = useState<any>(null);
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    // 模拟获取用户信息
    const userInfo = localStorage.getItem('userInfo');
    console.log('userInfo', userInfo);
    if (userInfo) {
      setCurrentUser(JSON.parse(userInfo));
    }
  }, []);

  const handleLogout = () => {
    localStorage.removeItem('userInfo');
    localStorage.removeItem('token');
    window.location.href = '/';
  };

  const pointsData = [
    { key: '1', date: '2025-03-01', event: '课堂表现奖励', points: 10 },
    { key: '2', date: '2025-03-05', event: '作业完成奖励', points: 5 },
    { key: '3', date: '2025-03-10', event: '竞赛获奖', points: 20 },
    { key: '4', date: '2025-03-12', event: '义工服务', points: 15 },
  ];

  // 获取当前选中的菜单项
  const getSelectedKeys = () => {
    const path = location.pathname;
    if (path.includes('/activities/list')) return ['activityList'];
    if (path.includes('/activities/my')) return ['myActivities'];
    if (path.includes('/activities/points')) return ['myPoints'];
    if (path.includes('/joinClub')) return ['joinClub'];
    if (path.includes('/manageClub')) return ['manageClub'];
    if (path.includes('/myClub')) return ['myClub'];
    return ['points'];
  };

  // 获取当前展开的子菜单
  const getOpenKeys = () => {
    const path = location.pathname;
    if (path.includes('/activities/')) return ['activities'];
    return [];
  };

  return (
    <Layout className="student-layout">
      <Header className="student-header">
        <div className="student-logo">
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{ color: 'white', marginRight: '8px' }}
          />
          <TrophyOutlined />
          <span>学生积分管理</span>
        </div>
        <div className="student-header-right">
          <Avatar icon={<UserOutlined />} />
          <span>{currentUser?.student_no || '同学'}</span>
          <Button type="link" icon={<LogoutOutlined />} onClick={handleLogout}>
            退出登录
          </Button>
        </div>
      </Header>
      <Layout>
        <Sider
          className="student-sider"
          collapsible
          collapsed={collapsed}
          width={200}
          breakpoint="lg"
          theme="light"
          trigger={null}
        >
          <Menu 
            mode="inline" 
            className="student-menu" 
            selectedKeys={getSelectedKeys()}
            defaultOpenKeys={getOpenKeys()}
            items={[
              {
                key: 'points',
                icon: <TrophyOutlined />,
                label: '个人主页',
                onClick: () => navigate('/student', { replace: true })
              },
              {
                key: 'dashboard',
                icon: <DashboardOutlined />,
                label: '积分申请'
              },
              {
                key: 'joinClub',
                icon: <TeamOutlined />,
                label: '参加社团',
                onClick: () => navigate('/joinClub')
              },
              
             
              {
                key: 'myClub',
                icon: <AppstoreOutlined />,
                label: '我的社团',
                onClick: () => navigate('/myClub')
              },
              {
                key: 'manageClub',
                icon: <SettingOutlined />,
                label: '我的管理',
                onClick: () => navigate('/manageClub')
              },

            
               {
                key: 'replacePrize',
                icon: <TeamOutlined />,
                label: '积分兑奖品',
                onClick: () => navigate('/StuPrizeList')
              },
              
              {
                key: 'activities',
                icon: <CalendarOutlined />,
                label: '社团活动',
                children: [
                  {
                    key: 'activityList',
                    icon: <UnorderedListOutlined />,
                    label: '活动列表',
                    onClick: () => navigate('/student/activities/list', { replace: true })
                  },
                  {
                    key: 'myActivities',
                    icon: <UserAddOutlined />,
                    label: '我的参与',
                    onClick: () => navigate('/student/activities/my', { replace: true })
                  },
                  {
                    key: 'myPoints',
                    icon: <StarOutlined />,
                    label: '我的积分',
                    onClick: () => navigate('/student/activities/points', { replace: true })
                  }
        
                ]
              }
            ]}
          />
        </Sider>
        <Layout className={`student-main-layout ${collapsed ? 'collapsed' : ''}`}>
          <Content className="student-content">
            <Routes>
              <Route path="/" element={
                <>
                  <Breadcrumb className="student-breadcrumb">
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Item>积分统计</Breadcrumb.Item>
                  </Breadcrumb>

                  <Card className="welcome-card">
                    <h2>{currentUser?.student_no || '同学'}同学：你好！</h2>
                    <p>您的积分情况如下：</p>
                  </Card>

                  <div className="stats-cards">
                    <Card className="stat-card">
                      <Statistic title="总积分" value={250} prefix={<TrophyOutlined />} />
                    </Card>
                    <Card className="stat-card">
                      <Statistic title="本月获得积分" value={50} prefix={<TrophyOutlined />} />
                    </Card>
                    <Card className="stat-card">
                      <Statistic title="当前排名" value={5} />
                    </Card>
                  </div>

                  <Card className="table-card">
                    <Table
                      columns={[
                        { title: '日期', dataIndex: 'date', key: 'date' },
                        { title: '事件', dataIndex: 'event', key: 'event' },
                        { title: '积分', dataIndex: 'points', key: 'points' }
                      ]}
                      dataSource={pointsData}
                    />
                  </Card>
                </>
              } />
              <Route path="activities/list" element={<JoinActivityPage />} />
              <Route path="activities/my" element={<RegisteredActivityPage />} />
              <Route path="activities/points" element={<  HistoryPointPage />} />
              {/* <Route path="activities/points" element={<div>我的积分页面（待实现）</div>} /> */}
            
            </Routes>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default StudentPage;
